<template>
  <div class="ten_box">
    <m-header modile-title="小程序最新版事务投票" go-back="true"></m-header>
    <div class="ten_main" v-for="(n,nindex) in list" :key="nindex">


      <!--单项部分-->
      <div class="choice_one" v-if="n.type===1">
        <div class="one_main" v-for="(item,sindex) in n.data" :key="sindex">
          <div class="title">{{sindex+1}}.{{item.title}}</div>
          <div class="sigel_content">
            <p>单选投票的具体内容展示</p>
            <div class="content_detail">查看详情</div>
            <!--选中的文案显示-->
            <div class="sign_icon" v-if="textShow(item.supplement_id,nindex)">
              {{textShow(item.supplement_id,nindex)}}
            </div>
          </div>
          <div class="option_part">
            <div class="option_btn" :class="[checkIndex(item.supplement_id,nindex,oindex)?'active':'']"
                 @click="choseMe(item.supplement_id,o.id,o.title,nindex,oindex)"
                 v-for="(o,oindex) in item.options_data"
                 :style="{background:o.bg}">{{o.title}}</div>
          </div>
          <div class="collect" v-if="item.is_remark==='1'">
            <div class="collect_title">意见收集处</div>
            <div class="collect_textarea">
              <textarea name="" id="" cols="30" rows="10" placeholder="请填写..."></textarea>
            </div>
          </div>
        </div>
      </div>


      <!--多选一部分-->
      <div class="more_one" v-if="n.type === 2">
        <div class="option_li" v-for="(r,rindex) in n.data" :key="rindex">
          <div class="option_head">
            <div class="common_title">
              {{nindex+1}}.{{r.title}}
            </div>
          </div>
          <div class="option_box">
            <div class="a_line" v-for="(r2,rindex2) in r.many_option_data" :key="rindex2">
              <div class="option_radio"
                    :class="[checkIndexs(r.supplement_id,nindex,rindex2)?'actives': '']"
                    @click="choseSpecial(nindex,r.supplement_id,r2.id,r2.title,rindex2)" :key="rindex2">
                <div class="radio_text">{{r2.title}}</div>
                <div class="kuang"></div>
              </div>
              <div class="line_msg">
                <div class="line_right">查看详情</div>
              </div>
            </div>

            <div class="specail_icon" v-if="specialText(r.supplement_id,nindex)">
              {{specialText(r.supplement_id,nindex)}}</div>

          </div>
          <div class="btn_special">
            <div class="btn_arr">
              <div class="option_btn"
                    :class="[checkIndexs2(r.supplement_id,nindex,bindex)?'active': '']"
                    @click="otherChoice(r.supplement_id,btn.id,btn.title,nindex,bindex)"
                    v-for="(btn,bindex) in r.options_data" :style="{background:btn.bg}"
                    :key="bindex">
                {{btn.title}}
              </div>
            </div>
          </div>
        </div>
      </div>


      <!--多选多部分-->
      <div class="still_more" v-if="n.type === 3">
        <div class="man_main_part" v-for="(m,mindex) in n.data" :key="mindex">
        <div class="common_title">{{nindex+1}}.{{m.title}}</div>
        <div class="man_li_box">
          <div class="man_li" v-for="(mo,mindex2) in m.many_option_data" :key="mindex2">
            <div class="man_li_left">
              <div class="option_radio" :class="[checkIndexArr(mo,m,nindex)?'actives': '']"
                    @click="choiceMe(mo,m,nindex)" :key="mindex2">
                     <div class="radio_text">{{mo.title}}</div>
                      <div class="kuang"></div>
              </div>
            </div>
            <div class="line_msg">
              <div class="line_left">
                <text>重要信息</text>
              </div>
              <div class="line_right">
                <text>查看详情</text>
              </div>
            </div>


          </div>
          <div class="more_icon" v-if="moreText(m.supplement_id,nindex)">
            {{moreText(m.supplement_id,nindex)}}</div>
        </div>

        <div class="btn_arr">
          <div class="option_btn"
                :class="[checkIndexArr2(m.supplement_id,nindex,opindex)?'active': '']"
                @click="otherPost(m.supplement_id,btn.id,btn.title,nindex,opindex)"
                v-for="(btn,opindex) in m.options_data" :style="{background:btn.bg}"
                :key="opindex">
            {{btn.title}}
          </div>
        </div>
        </div>
      </div>


    </div>
  </div>
</template>
<style lang="scss" scoped>
  .ten_box {
    padding-top: 60px;
    background: white;
    .ten_main{
      padding: 20px;
      .title{
        font-size: 24px;
        color: #0088cc;
      }
      // 公共标题部分样式
      .common_title {
        display: inline-flex;
        align-items: center;
        width: 100%;

        font-size: 22px;
        color: #397CBD;
        margin-bottom: 20px;
      }

      /*单项*/
      .choice_one{
        width: 100%;

        .one_main{
          padding: 20px;
          border: 1px solid #F3F5FD;
          box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
          border-radius: 10px;
          margin-bottom: 30px;
          .sigel_content{
            background: #f9f9f9;
            color: #666;
            font-size: 20px;
            padding: 20px;
            position: relative;
            p{
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .content_detail{
              width: 100%;
              display: inline-flex;
              align-items: center;
              justify-content: flex-end;
              margin-top: 10px;
              color: #0088cc;
            }
            .sign_icon{
              position: absolute;
              z-index: 2;
              top: 0;
              left: 25%;
              width: 250px;
              height: 80px;
              border: 10px solid #d86161;
              border-radius: 10px;
              transform: rotate(-15deg);
              color: #d86161;
              font-size: 30px;
              letter-spacing: 2px;
              text-align: center;
              font-weight: bold;
              background: rgba(255,111,94,.2);
            }
          }
          .option_part{
            border-top: 1px solid #F3F3F3;
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 20px;
            margin-top: 20px;
            .option_btn{
              width: 24%;
              padding: 20px 0;
              color: #ffffff;
              border-radius: 10px;
              font-size: 15px;
              text-align: center;
              margin-bottom: 10px;
            }
            .active{
              color: red;
            }
          }
          .collect{
            margin-top: 20px;
            .collect_title{
              padding: 20px 0;
              font-size: 16px;
              color: #333333;
            }
            .collect_textarea{
              padding: 20px 0;
              textarea{
                width: 100%;
                height: 200px;
                background: #F5F5F5;
                border-radius: 5px;
                color: #999999;
                padding: 20px;
                font-size: 15px;
              }
            }
          }
        }
      }
      /*多选一*/
      .more_one{
        .option_li {
          width: 100%;
          border: 1px solid #F3F5FD;
          box-shadow: 1px 1px 4px #E9E9E9;
          border-radius: 10px;
          margin-bottom: 30px;

          .option_head {
            padding: 20px;
            border-bottom: 1px solid #F3F3F3;

            .option_title {
              text {
                color: #FE6E61;
                font-size: 46px;
                margin-right: 10px;
              }

              font-size: 33px;
              color: #333333;
            }

            .check_text {
              display: inline-flex;
              align-items: center;
              justify-content: flex-end;
              width: 100%;

              text {
                font-size: 30px;
                color: #397cbd;
                padding-right: 10px;
              }

              .jiantou {
                width: 12px;
                height: 12px;
                border-top: 3px solid #397cbd;
                border-right: 3px solid #397cbd;
                transform: rotate(45deg);
                margin-left: 8px;
              }
            }
          }

          .option_box {
            padding: 20px;
            position: relative;
            .a_line {
              margin-bottom: 40px;

              .option_radio {
                width: 100%;
                border: 1px solid #E5E5E5;
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px;
                margin-bottom: 10px;
                border-radius: 10px;

                .radio_text {
                  width: 75%;
                  font-size: 20px;
                  color: #333333;
                }

                .kuang {
                  width: 40px;
                  height: 40px;
                  border: 1px solid #E5E5E5;
                }
              }

              .actives {
                background: #EEF6FF;
                border: 1px solid #AFCEF1;

                .radio_text {
                  color: #3780C8
                }

                .kuang {
                  width: 40px;
                  height: 40px;
                  background: #3780C7;
                  position: relative;
                }

                .kuang:after {
                  content: "";
                  position: absolute;
                  left: 7px;
                  top: 6px;
                  width: 25px;
                  height: 15px;
                  border: 7px solid #ffffff;
                  border-radius: 1px;
                  border-top: none;
                  border-right: none;
                  background: transparent;
                  transform: rotate(-45deg);
                }
              }

              .line_msg {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .line_left {
                  display: inline-flex;
                  align-items: center;
                  padding: 10px;
                  border: 1px solid #F5C38A;
                  border-radius: 10px;

                  image {
                    width: 38px;
                    height: 38px;
                    margin-right: 10px;
                  }

                  text {
                    font-size: 20px;
                    color: #F5C38A;
                  }
                }

                .line_right {
                  display: inline-flex;
                  align-items: center;
                  padding: 10px;

                  image {
                    width: 38px;
                    height: 38px;
                    margin-right: 10px;
                  }

                  text {
                    font-size: 20px;
                    color: #397CBD;
                  }
                }
              }
            }
            .specail_icon {
              position: absolute;
              z-index: 2;
              top: 30%;
              left: 25%;
              width: 350px;
              height: 100px;
              border: 10px solid #FF6F5E;
              border-radius: 10px;
              transform: rotate(-15deg);
              color: #FF6F5E;
              font-size: 50px;
              line-height: 100px;
              letter-spacing: 2px;
              text-align: center;
              font-weight: bold;
              background: rgba(255, 111, 94, .2);
            }
          }

          .collect {
            .collect_title {
              padding: 20px 20px;

              text {
                font-size: 33px;
                color: #333333;
              }
            }

            .collect_textarea {
              padding: 20px;

              textarea {
                width: 94%;
                height: 200px;
                background: #F5F5F5;
                border-radius: 5px;
                color: #999999;
                padding: 20px;
                font-size: 20px;
              }
            }
          }

          .btn_special {
            padding: 20px;

            .btn_arr {
              border-top: 1px solid #F3F3F3;
              display: inline-flex;
              width: 100%;
              align-items: center;
              justify-content: space-between;
              padding-top: 20px;
              margin-top: 20px;

              .option_btn {
                width: 24%;
                padding: 20px 0;
                color: #FFFFFF;
                // border: 1rpx solid #333333;
                border-radius: 10px;
                font-size: 20px;
                text-align: center;
              }

              .active {
                color: red;
                font-weight: bolder;
              }
            }
          }
        }
      }
      /*多选多*/
      .still_more{
        .man_main_part {
          border-radius: 10px;
          padding: 20px;
          border: 1px solid #F3F5FD;
          box-shadow: 1px 1px 4px #E9E9E9;
          background: #FFFFFF;
          margin-bottom: 30px;
          .man_li_box{
            position: relative;
            .man_li {
              margin-bottom: 40px;
              width: 100%;
              .man_li_left {
                width: 100%;

                .option_radio {
                  width: 100%;
                  border: 1px solid #E5E5E5;
                  display: inline-flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 20px;
                  border-radius: 10px;

                  .radio_text {
                    width: 75%;
                    font-size: 25px;
                    color: #333333;
                  }

                  .kuang {
                    width: 40px;
                    height: 40px;
                    border: 1px solid #E5E5E5;
                  }
                }

                .actives {
                  background: #EEF6FF;
                  border: 1px solid #AFCEF1;

                  .radio_text {
                    color: #3780C8
                  }

                  .kuang {
                    width: 40px;
                    height: 40px;
                    background: #3780C7;
                    position: relative;
                  }

                  .kuang:after {
                    content: "";
                    position: absolute;
                    left: 7px;
                    top: 6px;
                    width: 25px;
                    height: 15px;
                    border: 7px solid #ffffff;
                    border-radius: 1px;
                    border-top: none;
                    border-right: none;
                    background: transparent;
                    transform: rotate(-45deg);
                  }
                }
              }

              .line_msg {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
                margin-bottom: 30px;

                .line_left {
                  display: inline-flex;
                  align-items: center;
                  padding: 10px;
                  /*border: 1px solid #F5C38A;*/
                  border-radius: 10px;
                  text {
                    font-size: 28px;
                    color: #F5C38A;
                  }
                }

                .line_right {
                  display: inline-flex;
                  align-items: center;
                  padding: 10px;
                  text {
                    font-size: 28px;
                    color: #397CBD;
                  }
                }
              }

            }
            .more_icon {
              position: absolute;
              z-index: 2;
              top: 30%;
              left: 25%;
              width: 350px;
              height: 160px;
              border: 20px solid #FF6F5E;
              border-radius: 10px;
              transform: rotate(-15deg);
              color: #FF6F5E;
              font-size: 80px;
              line-height: 150px;
              letter-spacing: 2px;
              text-align: center;
              font-weight: bold;
              background: rgba(255, 111, 94, .2);
            }
          }


          .btn_arr {
            border-top: 1px solid #F3F3F3;
            display: inline-flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;
            margin-top: 20px;

            .option_btn {
              width: 24%;
              padding: 20px 0;
              color: #FFFFFF;
              // border: 1rpx solid #333333;
              border-radius: 10px;
              font-size: 20px;
              text-align: center;
            }

            .active {
              color: red;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {MessageBox} from 'mint-ui'

  export default {
    data() {
      return {
        list:[
          {
            type:1,
            data:[
              {
                content: '为保证业主合法权益，充分征求业主意见',
                is_remark: '0',
                many_option_data:[],
                options_data:[
                  {
                    id: "18",
                    title: "均不选聘",
                    bg: '#397CBD'
                  },
                  {
                    id: "17",
                    title: "弃权",
                    bg: '#FFBD72'
                  },
                  {
                    id: "9",
                    title: "同意",
                    bg: '#98B0C7'
                  },
                  {
                    id: "5",
                    title: "随多数",
                    bg: '#71AEE9'
                  }
                ],
                supplement_id: "154",
                title: '单项事项1'
              }
            ]
          },
          {
            type:2,
            data:[
              {
                content: '暂无',
                is_remark: '0',
                many_option_data:[
                  {
                    id: '12',
                    title: '方案1'
                  },
                  {
                    id: '11',
                    title: '方案2'
                  }
                ],
                options_data:[
                  {
                    id: "18",
                    title: "均不选聘",
                    bg: '#397CBD'
                  },
                  {
                    id: "17",
                    title: "弃权",
                    bg: '#FFBD72'
                  }
                ],
                supplement_id: "155",
                title: '多选一事项一'
              }
            ]
          },
          {
            type:3,
            data:[
              {
                content: '暂无',
                is_remark: '0',
                many_num: "1",
                many_option_data:[
                  {
                    id: '10',
                    title: '滨江物业'
                  },
                  {
                    id: '14',
                    title: '万科物业'
                  },
                  {
                    id: '15',
                    title: '绿城物业'
                  }
                ],
                options_data:[
                  {
                    id: "18",
                    title: "均不选聘",
                    bg: '#397CBD'
                  },
                  {
                    id: "17",
                    title: "弃权",
                    bg: '#FFBD72'
                  },
                  {
                    id: "9",
                    title: "同意",
                    bg: '#98B0C7'
                  },
                  {
                    id: "6",
                    title: "反对",
                    bg: '#71AEE9'
                  }
                ],
                supplement_id: "156",
                title: '多选多事项二'
              }
            ]
          },
          {
            type:1,
            data:[
              {
                content: '为保证业主合法权益，充分征求业主意见',
                is_remark: '0',
                many_option_data:[],
                options_data:[
                  {
                    id: "18",
                    title: "均不选聘",
                    bg: '#397CBD'
                  },
                  {
                    id: "17",
                    title: "弃权",
                    bg: '#FFBD72'
                  },
                  {
                    id: "9",
                    title: "同意",
                    bg: '#98B0C7'
                  },
                  {
                    id: '6',
                    title: '反对',
                    bg: '#71AEE9'
                  },
                  {
                    id: "5",
                    title: "随多数",
                    bg: '#397CBD'
                  }
                ],
                supplement_id: '157',
                title: '单项事项2'
              }
            ]
          },
          {
            type:2,
            data:[
              {
                content: '1',
                is_remark: '0',
                many_option_data:[
                  {
                    id: '11',
                    title: '方案2'
                  },
                  {
                    id: '12',
                    title: '方案1'
                  }
                ],
                options_data:[
                  {
                    id: "9",
                    title: "同意",
                    bg: '#98B0C7'
                  },
                  {
                    id: "6",
                    title: "反对",
                    bg: '#FFBD72'
                  },
                  {
                    id: "5",
                    title: "随多数",
                    bg: '#71AEE9'
                  }
                ],
                supplement_id: "158",
                title: '单项事项1'
              }
            ]
          },
          {
            type:3,
            data:[
              {
                content: '为保证业主合法权益，充分征求业主意见',
                is_remark: '0',
                many_num: "2",
                many_option_data:[
                  {
                    id: '15',
                    title: '绿城物业'
                  },
                  {
                    id: '14',
                    title: '万科物业'
                  },
                  {
                    id: '10',
                    title: '滨江物业'
                  }
                ],
                options_data:[
                  {
                    id: "5",
                    title: "随多数",
                    bg: '#71AEE9'
                  },
                  {
                    id: "17",
                    title: "弃权",
                    bg: '#FFBD72'
                  }
                ],
                supplement_id: "160",
                title: '单项事项1'
              }
            ]
          }
        ],
        selectArr: [], // 存放单项的值
        specialArr: [], // 存放多文字单项值
        selectData: [] // 存放多选多值
      }
    },
    methods: {
      // 单项事件部分
      // 点击样式
      checkIndex(sid,index,index2){
        const emptyArr = this.selectArr[index] || {}
        const checkArr = emptyArr[sid]
        if (!checkArr) return false;
        return checkArr.slice(-1)[0] === index2
      },
      // 获取值
      choseMe(sid,id,name,index,index2) {
        const useSelect = {
          ...this.selectArr[index]
        }
        useSelect[sid] = [
          sid,
          id,
          name,
          index2
        ]
        this.$set(this.selectArr,index,useSelect)
      },
      // 单项红色印章显示
      textShow(sid,index){
        const useShow = this.selectArr[index] || {}
        const selectUse  = useShow[sid]
        if (!selectUse) return false
        return selectUse[2] || ''
      },

      // 多选一部分事件
      // 点击样式
      checkIndexs(sid,index,index2) {
        const emptyArr = this.specialArr [index] || {}
        const checkArr = emptyArr[sid]
        if (!checkArr) return false
        return checkArr.slice(-1)[0] === index2
      },
      // 获取值
      choseSpecial(index,sid,id,name,index2) {
        const useSelect = {
          ...this.specialArr[index]
        }
        useSelect[sid] = [
          sid,
          id,
          name,
          index2
        ]
        this.$set(this.specialArr,index,useSelect)
      },
      // 多选一特殊按钮点击样式
      checkIndexs2(sid,index,_index){
        if (!this.specialArr[index]) {
          return false;
        }
        const emptyArr = this.specialArr[index] || {}
        const currentItem = emptyArr[sid]
        if (!currentItem) return false
        return currentItem.slice(-2)[0] === 'other'+_index
      },
      // 多选一特殊按钮红章显示
      specialText(sid, index){
        if (!this.specialArr[index]) {
          return false
        }
        const emptyArr = this.specialArr[index] || {}
        const currentItem = emptyArr[sid]
        if (!currentItem) return false
        console.log(currentItem)
        // [sid, id, text, _index, 'other'+index, null]
        const showName = currentItem.slice(-2)[0]
        return showName.includes('other') ?  currentItem[2]: false
      },

      // 多选一的三个特殊按钮事件
      otherChoice(sid, id, text, _index, index) {
        const that = this;
        MessageBox.confirm('Are you sure?').then(action => {
          // 如果数组里没有值，则里面的数据格式为空
                if (!that.specialArr[_index]) {
                  that.$set(that.specialArr, _index, {
                    [sid]: []
                  })
                }
                const useSelect = {
                  ...that.specialArr[_index]
                }
                useSelect[sid] = [sid, id, text, _index, 'other' + index, null]
                that.$set(that.specialArr, _index, useSelect)

                console.log('全部' + text)
                // console.log(that.specialArr)
        })
      },

      // 多选多事件
      // 点击样式
      checkIndexArr(item, parent, index) {
        const sid = parent.supplement_id;
        const value = `${sid}_${item.id}_${item.title}`
        const currentItem = this.selectData[index];
        if (!currentItem) {
          return false;
        }
        if (!currentItem[sid]) {
          return false;
        }
        return currentItem[sid].includes(value)

      },
      // 多选多特殊按钮点击样式
      checkIndexArr2(sid, index, _index) {
        const currentItem = this.selectData[index];
        if (!currentItem) {
          return false;
        }
        if (!currentItem[sid]) {
          return false;
        }
        return currentItem[sid].findIndex((item) => item.includes('other' + _index)) !== -1
      },

      // 多选多特殊按钮红章显示
      moreText(sid, index){
        const currentItem = this.selectData[index];
        if (!currentItem) {
          return false;
        }
        if (!currentItem[sid]) {
          return false;
        }
        console.log(currentItem[sid][0])
        if (!currentItem[sid][0]) {
          return false;
        }
        const name = currentItem[sid][0].split('_')
        // [sid, id, text, 'other' + index]
        const choseName = name.slice(-1)[0]
        return choseName.includes('other') ?  name[2]: false
      },


      // 获取值
      choiceMe(item, parent, _index) {
        const maxLen = parent.many_num; // 几选几限制数
        const sid = parent.supplement_id;
        const value = `${sid}_${item.id}_${item.title}`
        if (!this.selectData[_index]) {
          this.$set(this.selectData, _index, {
            [sid]: []
          })
        }
        const useSelect = {
          ...this.selectData[_index]
        };
        if (!this.selectData[_index][sid]) {
          useSelect[sid] = [];
          this.$set(this.selectData, _index, useSelect)
        }
        /* 检测出里面包含other的操作--移除掉 */
        // console.log(useSelect);
        const hasIndex = useSelect[sid].findIndex((item) => item.includes('other'));
        if (hasIndex !== -1) {
          useSelect[sid].splice(hasIndex, 1)
        }
        const index = useSelect[sid].findIndex((item) => item === value)
        if (index !== -1) {
          useSelect[sid].splice(index, 1)
        } else {
          if (useSelect[sid].length >= maxLen) {
            MessageBox({
              title: '提示',
              message: `最多选择${maxLen}项`,
              showCancelButton: true
            });
            return false;
          }
          useSelect[sid].push(value)
        }
        this.$set(this.selectData, _index, useSelect)
        // console.log(this.selectData)
      },

      // 多选多的三个固定按钮事件
      otherPost(sid, id, text, _index, index) {
        const that = this;
        MessageBox.confirm('是否确认全部'+text+'?').then(action=>{
          if (!that.selectData[_index]) {
            that.$set(that.selectData, _index, {
              [sid]: []
            });
          }
          const useSelect = {
            ...that.selectData[_index]
          };
          if (!that.selectData[_index][sid]) {
            useSelect[sid] = [];
            that.$set(that.selectData, _index, useSelect)
          }
          useSelect[sid] = [
            [sid, id, text, 'other' + index].join("_")
          ]
          that.$set(that.selectData, _index, useSelect);
        })
      },


    },
    components: {
      mHeader
    }
  }
</script>
